<template>
  <!-- 筛选区域 -->
  <el-form :inline="true" :model="queryParams" class="mb-4">
    <el-form-item label="采购合同编号">
      <el-input v-model="queryParams.contractNo" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="交货日期">
      <el-date-picker
        v-model="queryParams.deliveryDateRange"
        type="daterange"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        format="YYYY-MM-DD"
        value-format="YYYY-MM-DD"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="handleQuery">查询</el-button>
      <el-button @click="resetQuery">重置</el-button>
    </el-form-item>
  </el-form>

  <!-- 表格区域 -->
  <el-card class="mb-4">
    <el-table 
      :data="tableData" 
      border 
      stripe 
      style="width: 100%"
      :cell-style="{ padding: '10px' }"
      :header-cell-style="{ background: '#f5f7fa', fontWeight: 'bold' }"
    >
      <el-table-column label="采购合同签订日期" prop="signDate" width="180" />
      <el-table-column label="采购合同编号" prop="contractNo" width="200" />
      <el-table-column label="公司名称" prop="companyName" min-width="220" />
      <el-table-column label="交货日期" prop="deliveryDate" width="180" />
      <el-table-column label="货物明细" width="120">
        <template #default="{ row }">
          <el-link type="primary" @click="handleViewDetail(row)">查看</el-link>
        </template>
      </el-table-column>
      <el-table-column label="备注" prop="remark" min-width="200" />
    </el-table>

    <!-- 分页器 -->
    <div class="mt-4 flex justify-end">
      <el-pagination
        background
        layout="total, prev, pager, next, sizes, jumper"
        :total="total"
        :page-size="pageSize"
        :current-page="pageNum"
        :page-sizes="[10, 20, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      />
    </div>
  </el-card>
</template>

<script setup>
import { ref } from 'vue'
import { ElMessage } from 'element-plus'

const queryParams = ref({
  contractNo: '',
  deliveryDateRange: []
})

const tableData = ref([
  {
    signDate: '2025-02-14',
    contractNo: 'HT984424508',
    companyName: '春秋商贸有限公司',
    deliveryDate: '2025-05-28',
    remark: ''
  },
  {
    signDate: '2025-03-18',
    contractNo: 'HT984424509',
    companyName: '春秋商贸有限公司',
    deliveryDate: '2025-06-15',
    remark: '紧急订单，请优先处理'
  },
  {
    signDate: '2025-04-22',
    contractNo: 'HT984424510',
    companyName: '春秋商贸有限公司',
    deliveryDate: '2025-07-30',
    remark: '需要特殊包装'
  }
])

const total = ref(3)
const pageSize = ref(10)
const pageNum = ref(1)

// const handleQuery = () => {
//   // TODO: 发送请求获取数据
//   ElMessage.success('执行查询操作')
// }

const resetQuery = () => {
  queryParams.value.contractNo = ''
  queryParams.value.deliveryDateRange = []
}

const handleViewDetail = (row) => {
  ElMessage.info(`查看合同 ${row.contractNo} 的货物明细`)
}

// const handleSizeChange = (val) => {
//   pageSize.value = val
//   // TODO: 重新请求数据
// }

// const handlePageChange = (val) => {
//   pageNum.value = val
//   // TODO: 重新请求数据
// }
</script>

<style scoped>
.mb-4 {
  margin-bottom: 16px;
}
.mt-4 {
  margin-top: 16px;
}

/* 表头背景色 */
:deep(.el-table__header th) {
  background-color: #f5f7fa !important;
}

/* 单元格内边距 */
:deep(.el-table td) {
  padding: 10px 0;
}

/* 表格行高 */
:deep(.el-table .el-table__row) {
  height: 50px;
}

/* 分页器位置 */
.pagination-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}
</style>